<template>
	<view class="">
		<view
			class="wrap-box padlr24 pad-b90"
			:style="{
				'background': `url(${getImg('signIn-bg')}) no-repeat`,
			}"
		>
			<head-nav
				bgColor="rgba(0,0,0,0)" 
				title="签到送好礼"
			>
			</head-nav>
			<view class="head-box mar-t40 flex-a ">
				<u--image
					:showLoading="true" 
					:src="getImg('q-icon')"
					width="112rpx" 
					height="112rpx"
					radius="50%"
					class="bor_r50 avatar-box"
				></u--image>
				<view class="head-r pad-l14 h-120 flex-a ju-bt">
					<view class="">
						<view class="blokc-tit f-s32">
							今日已签到
						</view>
						<view class="r-tips mar-t10">
							已连续签到1天
						</view>
					</view>
					<view class="head-btn flex-center">
						签到玩法
					</view>
				</view>
			</view>
			<view class="date-box bg-f bor-r32 mar-t40 pad-b40">
				<sw-calendar @tapDate="tapDate"></sw-calendar>
				<view class="date-btn-box flex-center mar-t20">
					<view class="date-signIn flex-center">
						签到
					</view>
				</view>
			</view>
			<view class="award-box bg-f bor-r32 mar-t20 padtb24 padlr20">
				<view class="block-tit">
					签到奖励
				</view>
				<view class="block-tips mar-t14">
					2024.10.01-2024.10.31连续签到可领取以下奖励
				</view>
				<view class="award-list flex ju-bt padlr20 mar-t24">
					<view 
						class="award-li  flex-col flex-center" 
						v-for="(item, index) in awardList"
						:key="index"
					>
						<view class="award-status flex-center">
							待解锁
						</view>
						<u--image
							:showLoading="true" 
							:src="getImg('award-img')"
							width="96rpx" 
							height="96rpx"
							class="mar-t8"
						></u--image>
						<view class="award-tips mar-t14">
							{{ item.tips }}
						</view>
						<view class="award-tips mar-t8">
							{{ item.tips2 }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script> // 签到送好礼
	import swCalendar from '@/components/sw-calendar/sw-calendar.vue'
	export default {
		components: {
			swCalendar
		},
		data() {
			return {
				awardList: [
					{
						tips: "连续签到7天",
						tips2: "获得50积分"
					},
					{
						tips: "连续签到20天",
						tips2: "获得20元优惠券"
					},
					{
						tips: "连续签到30天",
						tips2: "获得600积分"
					},
				]
			}
		},
		onLoad() {
			
		},
		methods: {
			tapDate (data) {
				console.log(data, "---1");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.award-box {
		.block-tips {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}
		.award-list {
			.award-li {
				.award-status {
					width: 84rpx;
					height: 44rpx;
					background: #FFF1F5;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
				.award-tips {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					line-height: 28rpx;
				}
			}
		}
	}
	.date-box {
		.date-btn-box {
			.date-signIn {
				width: 472rpx;
				height: 90rpx;
				background: linear-gradient( 135deg, #FF63AE 0%, #FF7171 100%);
				border-radius: 60rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}
	}
	.head-box {
		.avatar-box {
			border: 4rpx solid #FFA4B9;
		}
		.head-r {
			width: calc(100% - 120rpx);
			.r-tips {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
			.head-btn {
				width: 164rpx;
				height: 64rpx;
				background: linear-gradient( 135deg, #FF63AE 0%, #FF7171 100%);
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
	.wrap-box {
		// height: 100vh;
		background-size: 100% 100% !important;
	}
</style>
